<template>
  <div class="mg-t-20">
    <e-upload
      ref="uploadRef"
      multiple
      :showUploadList="false"
      action="//jsonplaceholder.typicode.com/posts/">
        
      <template #trigger>
        <e-button type="primary">选择文件</e-button>
      </template>
      <e-button @click=onUpload>上传文件</e-button>
      <e-button @click=onCancel>取消上传</e-button>
      <template #multipleList="{fileList}">
        <div>
          {{ fileList }}
        </div>
        <e-table :columns="columns" :data="fileList">
          <template #size="{row}">
            <p>{{ Number(row.size)/1024 }}kb</p>
          </template>
          <template #status="{row}">
            <div>
              <div v-if="row.status === 'waiting'">待上传</div>
              <e-progress v-if="row.status === 'uploading'" :percent="row.percentage" :status="row.status === 'finished' && row.showProgress ? 'success' : 'normal'"> </e-progress>
              <div v-if="row.status === 'fail'">
                <e-icon type="close-circle-filled" color="#f04134"></e-icon>
                <span v-if="row.status === 'fail'">上传失败</span>
              </div>
              <div v-if="row.status === 'finished'">
                <e-icon type="check-circle" color="#10c038"></e-icon>
                <span>上传成功</span>
              </div>
            </div>
          </template>

          <template #action="{row}">
            <e-button type="text" v-if="row.status === 'uploading'" @click=handleCancelOne(row.uid)>取消上传</e-button>
            <e-button type="text" v-if="row.status === 'finished'" @click=handleDeleteOne(row.uid)>删除</e-button>
            <e-button type="text" v-if="row.status === 'finished'" @click=downloadFile()>下载</e-button>
            <e-button type="text" v-if="row.status === 'fail'" @click=handleReUpload(row)>重新上传</e-button>
            <!-- <e-button type="text">取消上传</e-button> -->
          </template>
        </e-table>
      </template>
      <template v-slot:tip>
        <div>
          支持扩展名: .jpeg .jpg .png
        </div>
      </template>
    </e-upload>
  </div>
</template>

<script>
export default {
  data(){
    return{columns:[
      {
        title: '文件名',
        key: 'name',
        resizable: true,
        // width:200
      },
      {
        title: '文件大小',
        key: 'size',
        resizable: true,
        slot:"size",
        // width:200
      },
      {
        title: '状态',
        key: 'status',
        resizable: true,
        slot:'status',
        width:200
      },
      {
        title: '操作',
        key: 'action',
        resizable: true,
        slot:'action',
        width:200
      }
    ],
    // uploadRef:'',
    }
  },
  methods:{
    onUpload(){
      this.$refs.uploadRef.handleUploadFiles()
    },
    onCancel(){
      this.$refs.uploadRef.handleCancelAll()
    },
    handleCancelOne(uid){
      this.$refs.uploadRef.handleCancelOne(uid)
    },
    handleDeleteOne(uid){
      this.$refs.uploadRef.handleDeleteOne(uid)
    },
    handleCancelAll(){
      this.$refs.uploadRef.handleCancelAll()
    },
    handleReUpload(file){
      this.$refs.uploadRef.handleReUpload(file)
    },
    async downloadFile(url="https://fastly.picsum.photos/id/72/800/800.jpg?hmac=yUlan-c5Ns8rxfyTLLnVDNHAXBo68XLUgnr_IrGCgS0", name = 'unnamed') {
      // if (!isClient) return Promise.reject();
      try {
        const res = await fetch(url);
        const blob = await res.blob();
        if (!blob) return Promise.reject();

        const localUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.setAttribute('href', localUrl);
        a.setAttribute('download', name);
        a.click();
        URL.revokeObjectURL(localUrl);
        return Promise.resolve();
      } catch(e) {
        return Promise.reject(e);
      }
    }
  }
}
</script>

<style>

</style>